<!--
 * @Author: Wushiqi
 * @Descripttion: 视频列表的单个视频
 * @Date: 2020-10-11 16:36:09
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-14 23:17:54
-->
<!-- 单个文章显示 -->
<template>
  <div @click="routerPush">
    <div class="detail-item">
      <div class="img-parent">
        <img :src="detailItem.img" style="width:100%;height:100%" alt="">
        <div class="bottom">
          <div class="icon-play2"><span class="video">123</span></div>
          <div class="icon-file-text"><span class="comment">{{ !detailItem.commentlen ? 66 : detailItem.commentlen }}</span></div>
        </div>
      </div>
      <p>{{ detailItem.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detailItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    routerPush() {
      if (this.$route.path !== `/article/${this.detailItem.id}`) {
        this.$router.push(`/article/${this.detailItem.id}`)
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.detail-item {
  p {
    font-size: 3.333vw;
  }
  
  .img-parent {
    position: relative;
    .bottom {
      padding: 0 2.5vw 2.222vw 2.5vw;
      display: flex;
      position: absolute;
      bottom: 0;
      color: white;
      justify-content: space-between;
      left: 0;
      right: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent) // 阴影效果
    }
  //   .video {
  //     position: absolute;
  //     left: 1.389vw;
  //     bottom: 0;
  //   }
  //   .comment {
  //     position: absolute;
  //     right: 2.389vw;
  //     bottom: 0;
  //   }
  }
}
</style>